<template>
  <el-table-column
    :key="code"
    :label="name"
    :min-width="200"
    :fixed="false"
    align="center"
  >
    <template #default="scope">
      <el-button type="primary" size="small" @click="showContent(scope.row)">查看</el-button>
      <!--      <el-popover placement="down" trigger="click">-->
      <!--        <template #reference>-->
      <!--          <el-button size="small" type="primary">查看</el-button>-->
      <!--        </template>-->
      <!--        <template #default>-->
      <!--          <div class="show-contain" v-html="scope.row[code]" />-->
      <!--        </template>-->
      <!--      </el-popover>-->
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'IkColumnNumber',
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'input'
  },
  inject: ["pageData"],
  props: {
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    line: {
      type: Number,
      default: 0
    },
    value: {
      type: Number,
      default: 0
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: Number,
      default: 0
    },
    precision: {
      type: Number,
      default: 2
    },
    step: {
      type: Number,
      default: 1
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100000
    },
    minLength: {
      type: Number,
      default: 0
    },
    maxLength: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    require: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      errorSign: [],
      message: [],
      //   --- 打开弹窗 ---
      visiable: false
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  methods: {
    /**
     * 展示富文本内容
     * @param row
     */
    showContent(row) {
      this.$router.push({
        name: "showContent",
        query: {
          rowCode: row.code,
          field: this.code
        }
      })
    }
  }
}
</script>
<style scoped>
::v-deep.require > .el-input__inner {
  border: red 1px solid;
}
</style>
<style lang="scss">
.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}

.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-contain {
  text-align: left;
  min-height: 300px;
}
</style>
